import React,{useEffect,useState,useMemo, useRef} from "react";
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent,TitleComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import style from "./index.module.less"

echarts.use([
    TooltipComponent,
    TitleComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ])

const Grade = ()=>{

    const [gradeone,setGradeone] = useState(1048);
    const [gradetwo,setGradetwo] = useState(735);
    const [gradethree,setGradethree] = useState(735);
    const [gradefour,setGradefour] = useState(735);

    let myRef = useRef(null)

    let option = useMemo(()=>{
        let option = {
            title: {
                text: '年级分布',
                left: 'center',
                top:'5%'
              },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient:'vertical',
              left: 'left',
              top:'5%'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: gradeone, name: '2021级' },
                  { value: gradetwo, name: '2020级' },
                  { value: gradethree, name: '2019级'},
                  { value: gradefour, name: '2018级' }
                ]
              }
            ]
          };
          return option
    },[gradeone,gradetwo,gradethree,gradefour])

    useEffect(()=>{
        let chartDom = document.getElementById("grademain");
        let myChart = echarts.init(chartDom,'dark');
        myRef.current = myChart;
    },[])

    useEffect(()=>{
      let myChart = myRef.current;
      myChart.setOption(option)
    },[gradeone,gradetwo,gradethree,gradefour])

    return(
        <div>
            <div id="grademain" className={style.gradecontainer}></div>
        </div>
    )

}

export default Grade